<template>
  <view class="container">
    <view class="Address_box">
      <view
        :key="item.id"
        class="Address_item"
        @click="selectAddress(index, item)"
        v-for="(item, index) in addressList"
        :class="{ redBoder: currIdex === index }"
      >
        <view class="Address_info">
          <view class="name"
            >{{ item.name }}<text class="phone">{{ item.phone }}</text></view
          >
          <view class="Address"
            >{{ item.class_A }}{{ item.class_B }}{{ item.class_C
            }}{{ item.class_D }}</view
          >
        </view>
        <view @click.stop="addShipAddress(item)">
          <uni-icons size="40rpx" type="compose"></uni-icons>
        </view>
      </view>
    </view>
    <u-empty
      mode="search"
      text="收货地址为空！"
      v-if="addressList.length == 0"
      icon="https://www.kamlung.net/images/other/search1.png"
    >
    </u-empty>
    <!-- 添加收货地址 -->
    <view class="bom_box">
      <view class="btn" @click="addShipAddress({})">+ 添加收货地址</view>
    </view>
  </view>
</template>

<script>
import { addressListApi } from '@/API/Shop'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'ShipAddreList',
  data() {
    return {
      options: [
        {
          text: '取消',
          style: {
            backgroundColor: '#007aff'
          }
        },
        {
          text: '确认',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ],
      currIdex: -1,
      addressList: [],
      baseUrl: this.$baseUrl
    }
  },
  onShow() {
    console.log('onShow')
    let pages = getCurrentPages()
    console.log('pages',pages)
  },
  computed: {
    ...mapState(['loginInfo', 'address'])
  },
  methods: {
    ...mapMutations(['updateAddress']),
    async getAddressList(uuid) {
      const { data } = await addressListApi({ uuid })
      this.addressList = data.data
      let id = this.address.id
      let Index = data.data.findIndex(item => item.id === id)
      if (Index >= 0) {
        this.currIdex = Index
      }
    },
    addShipAddress(item) {
      uni.navigateTo({
        url: `/Shop/ShipAddress?info=${encodeURIComponent(
          JSON.stringify(item)
        )}`
      })
    },
    selectAddress(i, item) {
      this.currIdex = i
      this.updateAddress(item)
      // 返回上一级
      uni.navigateBack({
        delta: 1
      })

      // console.log('lll')
      // uni.navigateTo({
      //   url: `/Shop/GoodsPay`
      // })
    }
  },
  onLoad() {
    this.shareMixin.title = `收货地址`
    this.shareMixin.path = `/pages/Shop/ShopAdmin`
  },
  onShow() {
    let uuid = this.loginInfo.uuid
    this.getAddressList(uuid)
  }
}
</script>
<style scoped lang="scss">
.container {
  height: 100%;
  background-color: #f8f9f8;
  .Address_box {
    padding: 10rpx 15rpx;
    border-radius: 12rpx;
    background-color: #fff;
    .Address_item {
      margin: 30rpx 0;
      padding: 15rpx 20rpx;
      border-radius: 5rpx;
      border: #fff solid 1px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .Address_info {
        .name {
          color: #333;
          font-weight: 600;
          font-size: 28rpx;
          margin-bottom: 10rpx;
          .phone {
            font-weight: 400;
            padding-left: 20rpx;
            color: #999;
            font-size: 24rpx;
          }
        }
        .Address {
          font-size: 26rpx;
          color: #666;
        }
      }
    }
    .redBoder {
      border: #f00 solid 1px;
    }
  }
  // 添加收货地址
  .bom_box {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 160rpx;
    display: flex;
    border-top: 1px solid #ddd;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    .btn {
      width: 360rpx;
      line-height: 60rpx;
      text-align: center;
      background-color: $theme-color;
      border-radius: 30rpx;
      color: #f8f9f8;
    }
  }
}
</style>
